<template>
  <div class="outside-content" :style="{...magnifyFontSizeObj}">
    <el-row>
      <el-col :span="8">
        <div class="table-list">
          <div class="content-module-title">聚类规则</div>
          <div class="select-multiple">
            <el-select
                class="multiple-select house-property-sales-trend-statistics-house-type-select"
                v-model="tradeClusterData.selectValue"
                multiple
                collapse-tags
                collapse-tags-tooltip
                size="small"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in tradeClusterData.selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  class="custom-select-option"
              />
            </el-select>
            <div class="filtrate-btn">生成</div>
          </div>
          <cluster-table-list :tableData="tradeClusterData.tableData" :dialogData="dialogData"
                              :columnData="tradeClusterData.tableColumnData" v-bind="$attrs" class="h250"></cluster-table-list>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="economic-data-statistics">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="content-module-title">聚类后分布</div>
              <boxplot-component v-if="tradeClusterData.afterClusterData?.xAxisData?.length" ref="afterClusterBoxPlot" class="h293"
                                 :boxplotData="tradeClusterData.afterClusterData" :dialogData="dialogData" v-bind="$attrs"></boxplot-component>
            </el-col>
            <el-col :span="12">
              <div class="content-module-title">定量分析结论</div>
              <cluster-pie v-if="tradeClusterData.clusterPieData?.length" :pieData="tradeClusterData.clusterPieData"
                           class="h220" :dialogData="dialogData" v-bind="$attrs"></cluster-pie>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import clusterTableList from '@/components/housePropertyAnalysis/statistics/clusterTableList.vue'
import clusterPie from '@/components/housePropertyAnalysis/statistics/clusterPie.vue'
import boxplotComponent from '@/components/housePropertyAnalysis/statistics/boxplotPublic.vue'

export default {
  components: {
    clusterTableList,
    clusterPie,
    boxplotComponent
  },
};
</script>
<script setup>
import {ref, defineProps, onMounted, onUnmounted} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  tradeClusterData: {
    type: Object,
    default: () => ({})
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

const magnifyFontSizeObj = ref({
  '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
})

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
  }
}

const updateChart = () => {
  changeFontSize();
};

onMounted(() => {
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.table-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.content-module-title {
  font-size: var(--custom-font-size-12);
  margin-bottom: 10px;
  color: white;
}
.select-multiple {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: 10px;
  .filtrate-btn {
    margin-left: 10px;
    background-color: #169ad4;
    padding: 3px 5px;
    border-radius: 5px;
    color: white;

  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
.multiple-select {
  width: 130px;
}
</style>